<template>
  <div class="aweek">
    <div class="title">
      <span class="vcenter">
        <i :style="{ border: '2px solid #E98B7F' }"></i>
        <span>{{ qingfenLegend[0] }}</span>
      </span>
      <span class="vcenter">
        <i :style="{ border: '2px solid #90A0F4' }"></i>
        <span>{{ qingfenLegend[1] }}</span>
      </span>
    </div>
    <div ref="form" style="width: 100%; height: 4.8rem"></div>
  </div>

</template>

<script>
var echarts = require('echarts/lib/echarts')
import { mapGetters } from 'vuex'
export default {
  name: 'DetailAweek',
  data() {
    return {
      thisYearColor: '#E98B7F',
      lastYearColor: '#90A0F4'
    }
  },
  props: ['qingfenLegend', 'listInfo'],
  watch: {
    listInfo: {
      handler(val) {
        this.initLine()
      },
      deep: true,
    }
  },
  computed: {
    /*
      firstTabId：标识当前选择第几个tab(省界门架 高速线路 分公司 收费站)
      tabIndex 标识切换出入省(出入口) 值为 1 2 3(不包括收费站表格)
      tableIndex 标识当前tabIndex要切换的表格 与tabIndex同时切换， 共同组成一个条件 值为 1 2 3(不包括收费站表格)
      timeObj 时间筛选范围, 监听时间改变, 或事件选择改变
      selectRange 选择状态为收费站时, 监听选择范围改变
      ********* firstFlag 标识是切换最顶部tab, 此时不触发其他监听, 防止多次请求问题 *******
     */
    ...mapGetters(['firstTabId', 'timeObj', 'tabIndex'])
  },
  methods: {
    initLine() {
      var eChart = echarts.init(this.$refs.form);
      let useListInfo = this.listInfo.filter(item => {
        return item.dhm !== '合计'
      })
      let thisYear = useListInfo.map(item => {
        return item.num
      })
      let lastYear = useListInfo.map(item => {
        return item.qunum
      })
      let xInfo = useListInfo.map(item => {
        return item.dhm
      })
      eChart.setOption({
        title: {
          text: '单位：辆',
          top: '0',
          textStyle: {
            color: '#999999',
            fontWeight: 'lighter',
            fontSize: 10
          }
        },
        backgroundColor: '#fff',
        grid: {
          top: '12%',
          left: '1%',
          right: '5%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          data: xInfo,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#DEDEDE',
              width: 1
            }
          },
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#999999',
            },
            // interval:0
          },
          showMinLabel: true,
          showMaxLabel: true,
          boundaryGap: false,
        },
        yAxis: {
          show: true,
          type: 'value',
          axisLabel: {
            textStyle: {
              fontSize: 12,
              color: '#999999',
            }
          },
          splitLine: {
            lineStyle: {
              color: '#DEDEDE',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            return `
                            <div>
                            <p><i style="display:inline-block;width:.7rem;"></i>${params[0].name}</p>
                            <p><i style="display:inline-block;width:.2rem;height:.2rem;border-radius:2rem;margin-right:.1rem;background:${this.thisYearColor};"></i><span>${this.qingfenLegend[0]}：</span><span>${params[0].data
              }</span></p>
                            <p><i style="display:inline-block;width:.2rem;height:.2rem;border-radius:2rem;margin-right:.1rem;background:${this.lastYearColor};"></i><span>${this.qingfenLegend[1]}：</span><span>${params[1].data
              }</span></p>
                            <p><i style="display:inline-block;width:.2rem;height:.2rem;margin-right:.1rem;"></i><span>同比：</span><span>${params[1].data == '0'
                ? '--'
                : ((100 * (params[0].data - params[1].data)) / params[1].data).toFixed(
                  1
                )
              }%</span></p>
                            </div>
                            `
          }
        },
        series: [
          {
            type: 'line',
            name: `${this.qingfenLegend[0]}`,
            data: thisYear,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#E98B7F'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#E98B7F'
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF'
                  }
                ])
              }
            }
          },
          {
            type: 'line',
            name: `${this.qingfenLegend[1]}`,
            data: lastYear,
            smooth: true,
            itemStyle: {
              normal: {
                color: '#90A0F4'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#90A0F4'
                  },
                  {
                    offset: 1,
                    color: '#FFFFFF'
                  }
                ])
              }

            }
          }

        ]
      })
    }
  }
}
</script>

<style lang='less' scoped>
.title {
  display: flex;
  justify-content: space-between;

  p {
    margin-top: 0.3rem;
    margin-left: 0.3rem;
    height: 0.36rem;
    font-size: 0.36rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #333333;
    line-height: 0.36rem;

    span {
      color: #46AE65;
    }
  }

  .theDate {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.2rem;
    margin-right: 0.3rem;
    width: 1.26rem;
    height: 0.6rem;
    background: #F7F7F7;
    border-radius: 0.12rem;
    border: 0.01rem solid #CBCBCB;
    font-size: 0.26rem;
    color: #666;

    .grayCrow {
      margin-left: 0.08rem;
      width: 0;
      height: 0;
      border-right: 0.1rem solid transparent;
      border-left: 0.1rem solid transparent;
      border-top: 0.1rem solid #cccccc;
    }
  }
}

.aweek {
  padding: 0.18rem 0.3rem 0;
  // border-bottom: 1px solid #EFEFEF;

  .title {
    display: flex;
    justify-content: flex-end;
    padding-right: 0.18rem;

    i {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      border-radius: 0.1rem;
      margin-right: 0.08rem;
    }

    span {
      &:nth-child(1) {
        margin-right: 0.28rem;
      }

      height: 0.26rem;
      font-size: 0.26rem;
      font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
      font-weight: 400;
      color: #333333;
      line-height: 0.26rem;
    }

  }
}
</style>